<template>
  <div ref="tableTootip" class="tableTootip">
    <a-tooltip overlayClassName="table_tooltip" @mouseenter="showToolTip">
      <template slot="title">
        {{content}}
      </template>
      <span ref="content" class="content">{{content}}</span>
    </a-tooltip>
  </div>
</template>
<script>
import {stringWidth } from '../until';
export default {
  name: 'TableTootip',
  props:['content'],
  methods:{
    showToolTip(e) {
      if (e.target.clientWidth > e.target.scrollWidth) {
        e.target.style.pointerEvents = "none"; // 阻止鼠标的移入事件
      }else {
        if(stringWidth(this.content)+1 <= e.target.clientWidth){
          e.target.style.pointerEvents = "none"; // 阻止鼠标的移入事件
        }
      }
    },
  }
};
</script>
<style scoped>
.tableTootip{
  width: 100%;
  display: inline-flex;
  align-items: center;
}
.content {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

